:root {
    --color-calc: linear-gradient(to bottom right, beige, palegoldenrod);
    --radius-calc: 1rem;
    --spacing-calc: 1.5rem;

    --color-selection: #464;
    --color-selection-text: white;
    --color-screen: #beb;
    --color-screen-text: #222;
    --radius-screen: 1rem;
    --font-size-current: 2.5rem;
    --font-size-history: 2.6rem;

    --color-button: #ddd;
    --color-button-hover: #888;
    --color-button-clear: #fbb;
    --color-button-execute: #bbf;
    --color-button-text: #222;
    --color-button-text-hover: white;
    --radius-button: 1rem;
    --font-size-button: 2.6rem;
    --gap-button: 1rem;

    --color-body: #333;
    --color-shadow: #2225;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    user-select: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-body);
}

.calc {
    width: 600px;
    height: 800px;
    display: flex;
    flex-direction: column;
    background: var(--color-calc);
    border-radius: var(--radius-calc);
}

.screen {
    font-family: monospace;
    margin: var(--spacing-calc);
    background-color: var(--color-screen);
    color: var(--color-screen-text);
    height: 140px;
    border-radius: var(--radius-screen);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px;
    user-select: text;
    box-shadow: .3rem .2rem .2rem inset var(--color-shadow);
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-selection-text);
}

.current {
    font-size: var(--font-size-current);
}

.history {
    font-size: var(--font-size-history);
}

.keyboard {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-button);
    margin: var(--spacing-calc);
    margin-top: 0;
}

.button {
    font-family: monospace;
    background-color: var(--color-button);
    color: var(--color-button-text);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-button);
    cursor: pointer;
    box-shadow: .3rem .2rem .15rem var(--color-shadow);
    transition-duration: 100ms;
    transition-property: background-color color box-shadow;
}

[data-role="clearEntry"],
[data-role="clear"],
[data-role="erase"] {
    background-color: var(--color-button-clear);
}

[data-role="execute"] {
    background-color: var(--color-button-execute);
}

.button:active {
    box-shadow: .1rem 0 .15rem var(--color-shadow);
}

.button:hover {
    background-color: var(--color-button-hover);
    color: var(--color-button-text-hover);
}
